<template>
  <el-dialog class="assign-role" title="分配角色" :visible="showRoleDialog" width="40%" @close="close" @open="open">

    <!-- 这里准备复选框 -->
    <el-checkbox-group v-model="checkList" v-loading="loading">
      <!-- 复选框label时选中的值 -->
      <el-checkbox v-for="item in roleLists" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
    </el-checkbox-group>

    <template #footer>
      <el-row type="flex" justify="center">
        <el-button type="primary" size="small" @click="assignRoles">确定</el-button>
        <el-button size="small" @click="close">取消</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
// 获取角色列表
import { assignRoles, getRoleList } from '@/api/settings'
// 获取用户的当前角色, 进行回显
import { getUserById } from '@/api/user'
export default {
  props: {
    // 接受父组件的
    showRoleDialog: {
      type: Boolean,
      default: false
    },

    // id（用于发送请求）
    roleIds: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // 复选框勾选中的值(id)可做回显)
      checkList: [],
      // 存角色的
      roleLists: [],

      loading: false
    }
  },

  methods: {
    // 让父组件关闭对话框
    close() {
      this.$emit('update:showRoleDialog', false)
    },

    // created 中直接发请求会有问题, 一进入页面, 弹框还没点就发请求了, 而此时还没有 roleIds
    // 可以换到弹框显示发请求, 给弹框注册open事件

    // 发送请求获取角色列表
    async getRoleList() {
      const res = await getRoleList(1, 100)
      console.log(res)
      this.roleLists = res.rows
    },

    // 获取用户的当前角色(有用户信息), 进行回显(已经被勾选拥有的角色)
    async getUserById(id) {
      const res = await getUserById(this.roleIds)
      // 进行回显(已经被勾选拥有的角色)
      this.checkList = res.roleIds
      console.log(res)
    },
    async  open() {
      this.loading = true
      // open是当对话框显示的时候调

      // 发送请求获取角色列表
      // await this.getRoleList()
      // 获取用户的当前角色, 进行回显(有用户信息，可以知道已经时什么角色)
      // await this.getUserById()

      // Promise.all([]) 整合多个接口请求
      await Promise.all([this.getRoleList(), this.getUserById()])
      this.loading = false
    },

    // 点击保存，给员工分配角色
    async assignRoles() {
      await assignRoles({
        id: this.roleIds,
        roleIds: this.checkList
      })

      this.$emit('update:showRoleDialog', false)
      this.$message.success('修改成功')
    }

  }
}
</script>
